<template>
	<div class="content">
		<div class="hot_top">
			<div class="hot_top_wrapper">
				<div class="hot_top_logo"></div>
				<div class="hot_time">更新日期: {{create_time | TimeTransform}}</div>
			</div>

		</div>
		<new_music v-for="(item,index) in show_rank_curr" :key='index' :index="index" :song_name="item.name" :artists_name="item.ar"
		:album_name="item.al.name" :song_id="item.id" :picUrl='item.picUrl' :id_list='id_list' :idx="index"></new_music>
		<van-loading color='#d43c33' />
		
	</div>

</template>

<script>
	import {
		get_top_list_id
	} from '../../API/rank.js';
	import {
		get_top_list
	} from '../../API/rank.js';
	import new_music from './Recommand/newest_music.vue';
	export default {
		data() {
			return {
				top_list_id: 123,
				songs_ranktotal: [],
				create_time: 123,
				id_list: [],
				showlength: 20,
			};
		},
		async created() {
			let abc = await get_top_list_id();
			this.top_list_id = abc.data.list[3].id;
			// console.log(abc.data.list[3],99999999999);
			this.create_time = abc.data.list[3].trackUpdateTime;
			let cde = await get_top_list(this.top_list_id);

			// this.songs_rank = cde.data.playlist.tracks.slice(0, this.showlength);
			this.songs_ranktotal = cde.data.playlist.tracks;
			// console.log(this.songs_rank,987654321);
			this.id_list = this.songs_ranktotal.map(el => {
				return el.id;
			})
			// console.log(this.id_list);
			this.$bus.$on("loadMore", this.getbottom);

		},
		filters: {
			TimeTransform(val) {
				let nowDate = new Date(val);
				let month = (nowDate.getMonth() + 1) + '月';
				let date = nowDate.getDate() + '日';
				return month + date;
			}
		},
		components: {
			new_music,
		},
		computed: {
			show_rank_curr() {
				return this.songs_ranktotal.slice(0, this.showlength);
			}
		},
		methods: {
			getbottom(arg) {

				let numHeight = arg.appSTop + arg.appCHeight;
				if ((numHeight >= (arg.appSHeight - 5)) && this.showlength < 100) {
					this.showlength += 10;
				}
			},
		}
	}
</script>


<style lang="scss" scoped="">
	.content {
		padding-top: 124px;

		.hot_top {
			padding-top: 38.9%;
			background: url(../../assets/Rank/rege_bg.jpg);
			position: relative;

			// display: flex;
			// align-content: center;
			.hot_top_wrapper {
				position: absolute;
				top: 50%;
				left: 10%;
				transform: translate(0, -50%);

				.hot_top_logo {
					width: 142px;
					height: 67px;
					background: url(../../assets/Rank/regebang_logo.png);
					background-position: -24px -30px;
					background-size: 166px 97px;
				}

				.hot_time {
					margin-top: 10px;
					color: #fff;
					font-size: 12px;
					transform: scale(0.91);
					text-align: left;
				}
			}

		}
	}
</style>
